﻿/* Place custom styles below */
body {
     min-width: 520px;
}
.column {
    width: 170px; 
    float: left; 
    padding-bottom: 100px;
}
.portlet {
     margin: 0 1em 1em 0;
}
.ui-sortable-placeholder {
     border: 1px dotted black; 
     visibility: visible !important; 
     height: 50px !important;
}
.ui-sortable-placeholder * {
     visibility: hidden;
}

/* Custom styles for the tiles */
.tile{
    width:150px;
    height:150px;
    color:#FFFFFF;
    margin: 0;
    margin-top:5px;
    margin-right:10px;
    margin-bottom:5px;
    cursor:pointer;
    padding:5px;
    float:left;
    text-align:right;
    font-family:Segoe UI, sans-serif; 
    font-size:14px;
    background-repeat: no-repeat; 
    background-position:center;
    overflow:hidden;
    position:relative;
}

.PINK {
    background-color:#FFAAAA;
}
.PURPLE {
    background-color:#A200FF;
}
.MAGENTA {
    background-color:#FF0097;
}
.TEAL {
    background-color:#00ABA9;
}
.LIME {
    background-color:#8CBF26;
}
.BROWN {
    background-color:#A05000;
}
.ORANGE {
    background-color:#F09609;
}
.BLUE {
    background-color:#1BA1E2;
}
.RED {
    background-color:#E51400;
}
.GREEN {
    background-color:#339933; 
}

.tileNumber{
    text-align:center;
    font-family:Segoe UI Light, sans-serif; 
    font-size:72px;
    margin-top:10px;
    margin-bottom:10px;
}

.Tile-Description {
    text-align:left;
    left:0 ;
    /*width: 160px;*/ 
    width: 150px;
    color: #fff; 
    position: absolute;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.6); 
    top: 125px; 
    height: 160px;
    font-size: 12pt;
    padding:10px;
}
.Tile-Description a,.Tile-Description a:hover,.Tile-Description a:visited {
    text-decoration:none; outline:none;color:#FFFFFF
}
.Tile-Description a:active,.Tile-Description a:focus {
    outline:0
}
